<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">用户相关</el-breadcrumb-item>
                <el-breadcrumb-item>付费会员卡</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 会员列表 -->
            <div class="userlist">
              <div class="status_box">
                <div class="timeCard"><el-button @click="dialog1 = true">添加付费次卡</el-button></div>
                <div class="clubCard"><el-button @click="dialog2 = true">添加付费会员卡</el-button></div>
              </div>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="使用中" name="first"></el-tab-pane>
                <el-tab-pane label="已下架" name="second"></el-tab-pane>
              </el-tabs>
              <div class="table">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                  <el-table-column prop="name" label="名称" width="100"></el-table-column>
                  <el-table-column prop="sale" label="卡售价">
                    <template slot-scope="scope">
                      <span>￥{{scope.row.sale}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="userTime" label="有效期">
                    <template slot-scope="scope">
                      <span>{{scope.row.userTime}}天</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="type" label="类型" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.type== 1">会员卡</span>
                      <span v-if="scope.row.type== 2">次卡</span>
                      <span v-if="scope.row.type== 3">新手卡</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="totalCounts" label="累计会员数"></el-table-column>
                  <el-table-column prop="counts" label="会员数"></el-table-column>
                  <el-table-column prop="userTime" label="备注">
                    <template slot-scope="scope">
                      <span>{{scope.row.village}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right"  width="200">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="dialog3 = true,redact(scope.row)">编辑</el-button>
                      <el-button type="text" size="small"@click="soldout(scope.row)" v-if="flag==1">下架</el-button>
                      <el-button type="text" size="small"@click="soldup(scope.row)" v-if="flag==3">上架</el-button>
                      <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[50,100,150,200,250]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
              <!-- 弹窗 -->
              <el-dialog title="添加付费次卡" :visible.sync="dialog1"  width="480px" class="dialog">
                <el-form ref="timeCard" :model="timeCard" label-width="100px">
                  <el-form-item label="卡名称">
                    <el-input v-model="timeCard.name" class="name" placeholder="请输入卡名称" maxlength="20" show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="卡售价">
                    <el-input v-model="timeCard.price" class="price" placeholder="请输入0.01-9999的数字"></el-input>
                    <span class="pricetext">元</span>
                  </el-form-item>
                  <el-form-item label="使用次数">
                    <el-input v-model="timeCard.number" class="price" placeholder="请输入次数"></el-input>
                    <span class="pricetext">次</span>
                  </el-form-item>
                  <el-form-item label="有效期">
                    <el-select v-model="timeCard.time" placeholder="请选择购买时间"  class="time">
                      <el-option label="购买后60天" value="60"></el-option>
                    </el-select>
                    <p class="timetext">每日洗车时间 20分钟  每日使用次数 1次</p>
                  </el-form-item>
                  <el-form-item label="备注">
                    <!-- <el-input v-model="timeCard.remark" class="name" placeholder="仅自己可见"></el-input> -->
                    <el-select v-model="timeCard.remark" placeholder="仅自己可见">
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.village"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="dialog1 = false,onSubmit1('timeCard')" class="sure">确 定</el-button>
                    <el-button @click="dialog1 = false" class="cancel">取 消</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
              <el-dialog title="添加付费会员卡" :visible.sync="dialog2"  width="480px" class="dialog">
                <el-form ref="clubCard" :model="clubCard" label-width="100px">
                  <el-form-item label="卡类型">
                    <el-select v-model="clubCard.type" placeholder="请选择购买时间"  class="time">
                      <el-option label="月卡" value="1"></el-option>
                      <el-option label="新手卡" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="卡名称">
                    <el-input v-model="clubCard.name" class="name" placeholder="请输入卡名称" maxlength="20" show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="卡售价">
                    <el-input v-model="clubCard.price" class="price" placeholder="请输入0.01-9999的数字"></el-input>
                    <span class="pricetext">元</span>
                  </el-form-item>
                  <el-form-item label="虚拟价">
                    <el-switch v-model="clubCard.choose"></el-switch>
                    <el-input v-model="clubCard.virtualPrice" class="price" placeholder="请输入0.01-9999的数字"></el-input>
                    <span class="pricetext">元</span>
                  </el-form-item>
                  <el-form-item label="有效期">
                    <el-select v-model="clubCard.time" placeholder="请选择购买时间"  class="time">
                      <el-option label="购买后15天" value="15"></el-option>
                      <el-option label="购买后30天" value="30"></el-option>
                      <el-option label="购买后60天" value="60"></el-option>
                      <el-option label="购买后90天" value="90"></el-option>
                      <el-option label="购买后180天" value="180"></el-option>
                      <el-option label="购买后365天" value="365"></el-option>
                    </el-select>
                    <p class="timetext">每日洗车时间 20分钟  每日使用次数 1次</p>
                  </el-form-item>
                  <el-form-item label="备注">
                    <!-- <el-input v-model="clubCard.remark" class="name" placeholder="仅自己可见"></el-input> -->
                    <el-select v-model="clubCard.remark" placeholder="仅自己可见">
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.village"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="dialog2 = false,onSubmit2('clubCard')" class="sure">确 定</el-button>
                    <el-button @click="dialog2 = false" class="cancel">取 消</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
              <el-dialog title="编辑付费卡" :visible.sync="dialog3"  width="480px" class="dialog">
                <el-form ref="card" :model="card" label-width="100px">
                  <el-form-item label="卡类型" v-if="card.type==1||card.type==3">
                    <el-input class="name" :disabled="true" v-if="card.type==1" placeholder="月卡"></el-input>
                    <el-input class="name" :disabled="true" v-if="card.type==3" placeholder="新手卡"></el-input>
                  </el-form-item>
                  <el-form-item label="卡名称">
                    <el-input v-model="card.name" class="name"></el-input>
                  </el-form-item>
                  <el-form-item label="卡售价">
                    <el-input v-model="card.price" class="price" :disabled="true"></el-input>
                    <span class="pricetext">元</span>
                  </el-form-item>
                  <el-form-item label="虚拟价" v-if="card.type==1">
                    <el-switch v-model="card.choose"></el-switch>
                    <el-input v-model="card.virtualPrice" class="price"></el-input>
                    <span class="pricetext">元</span>
                  </el-form-item>
                  <el-form-item label="使用次数" v-if="card.type==2">
                    <el-input v-model="card.number" class="price" :disabled="true"></el-input>
                    <span class="pricetext">次</span>
                  </el-form-item>
                  <el-form-item label="有效期">
                    <el-input v-model="'购买后'+card.time+'天'" class="name" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="备注">
                    <!-- <el-input v-model="card.remark" class="name" placeholder="仅自己可见"></el-input> -->
                    <el-select v-model="card.remark" placeholder="仅自己可见">
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.village"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="结束时间" v-if="card.type==3">
                    <el-date-picker  v-model="card.overTime"  type="datetime"  placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59"></el-date-picker>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="dialog3 = false,onSubmit3('card')" class="sure">确 定</el-button>
                    <el-button @click="dialog3 = false" class="cancel">取 消</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'

  export default {
    name: 'PayUser',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 50,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,/* 前往第几页 */
        flag:1,
        tableData: [],// 会员表格
        multipleSelection: [], // 选择后的列表
        status:2,//设备状态
        activeName: 'first',
        dialog1: false,// 对话框1 付费次卡
        timeCard:{//付费次卡表单
          name:'',//卡名称
          price:'',//卡售价
          number:'',//卡使用次数
          time:'',//卡时间
          remark:'',//备注
        },
        dialog2: false,// 对话框2 付费会员卡
        clubCard:{//付费会员卡表单
          type:'',//卡类型
          name:'',//卡名称
          price:'',//卡售价
          choose:false,//虚拟价显示与否
          virtualPrice:'',//虚拟价
          time:'',//卡时间
          remark:'',//备注
        },
        dialog3: false,// 对话框3 编辑付费卡
        card:{//编辑付费卡表单
          id:'',//卡id
          name:'',//卡名称
          price:'',//卡售价
          time:'',//卡时间
          number:'',//卡使用次数
          type:'',//卡类型
          virtualPrice:'',//卡虚拟价
          choose:'',//卡开关
          overTime:null,//新手卡结束时间
          remark:'',//备注
        },
        options:[]
      }
    },
    mounted() {
      this.getAllCards()
      this.getRmark()
    },
    methods: {
      //获取所有使用中付费卡
      getAllCards(){
        this.$axios.post(this.baseURL+'card/getAllCards',{
          "page": this.page,
          "pageSize":this.pageSize,
          "requestSource":"PC",
          'flag':1,//1-上架 2-删除 3-下架
        }).then((res)=>{
          console.log(res,"所有使用中付费卡");
          if(res.data.code==1){
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
            this.flag=1;//1-上架 2-删除 3-下架
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //获取所有下架中付费卡
      getUndercarriage(){
        this.$axios.post(this.baseURL+'card/getUndercarriage',{
          "page": this.page,
          "pageSize":this.pageSize,
          "requestSource":"PC",
          'flag':3,//1-上架 2-删除 3-下架
        }).then((res)=>{
          console.log(res,"所有下架付费卡");
          if(res.data.code==1){
            this.tableData = res.data.data;
            this.total = res.data.data.length;
            this.flag=3;//1-上架 2-删除 3-下架
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 切换tab
      handleClick(tab, event) {
        // console.log(tab, event);
        if(tab.index ==0){
          this.status = 2;
          this.getAllCards()
        }else{
          this.status = 1;
          this.getUndercarriage()
        }
      },
      // 表格的全选
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
      },
      //获取给设备添加的备注信息
      getRmark(){
        this.$axios.post(this.baseURL+'village/villageList',{
          "requestSource":"PC",
        }).then((res)=>{
          console.log(res,"备注");
          if(res.data.code==1){
            this.options = res.data.data
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //提交对话框1 付费次卡
      onSubmit1(){
        console.log("提交对话框1",this.timeCard)
        this.$axios.post(this.baseURL+'card/add',{
          'name':this.timeCard.name,
          'type':2,
          'sale':this.timeCard.price,
          'userTime':this.timeCard.time,
          'times':this.timeCard.number,
          'requestSource':"PC",
          'villageId':this.timeCard.remark
        }).then((res)=>{
          console.log(res,"添加付费卡");
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '添加成功'
            });
            this.timeCard.name="";
            this.timeCard.price="";
            this.timeCard.time="";
            this.timeCard.number="";
            setTimeout(()=>{
              this.getAllCards();
            },1000)
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        })
      },
      //提交对话框2 付费会员卡
      onSubmit2(){
        console.log("提交对话框2",this.clubCard)
        this.$axios.post(this.baseURL+'card/add',{
          'name':this.clubCard.name,
          'type':this.clubCard.type,
          'sale':this.clubCard.price,
          'userTime':this.clubCard.time,
          'virtualPrice':this.clubCard.virtualPrice,
          'open':this.clubCard.choose,
          'requestSource':"PC",
          'villageId':this.clubCard.remark
        }).then((res)=>{
          console.log(res,"添加付费卡");
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '添加成功'
            });
            this.clubCard.name="";
            this.clubCard.type="";
            this.clubCard.price="";
            this.clubCard.time="";
            this.clubCard.virtualPrice="";
            this.clubCard.choose=false;

            setTimeout(()=>{
              this.getAllCards();
            },1000)
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        })
      },
      //下架付费卡
      soldout(row){
        console.log(row)
        this.$confirm('下架后，用户端不展示，套餐不能购买，已经购买用户，不受影响，确认还要下架吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL+'card/delOrUndercarriage',{
            'id':row.id,
            "flag": 3,//1-上架 2-删除 3-下架
            "requestSource":"PC",
          }).then((res)=>{
            console.log(res,"下架付费卡");
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '下架成功'
              });
              setTimeout(()=>{
                this.getAllCards();
              },1000)
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //删除付费卡
      del(row){
        console.log(row)
        this.$confirm('删除后将会使已购买的会员卡变为失效，可能遭到用户投诉，确认还要删除吗？?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL+'card/delOrUndercarriage',{
            'id':row.id,
            "flag": 2,//1-上架 2-删除 3-下架
            "requestSource":"PC",
          }).then((res)=>{
            console.log(res,"删除付费卡");
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              setTimeout(()=>{
                this.getAllCards();
              },1000)
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //上架付费卡
      soldup(row){
        console.log(row)
        this.$confirm('是否上架套餐?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL+'card/delOrUndercarriage',{
            'id':row.id,
            "flag": 1,//1-上架 2-删除 3-下架
            "requestSource":"PC",
          }).then((res)=>{
            console.log(res,"上架付费卡");
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '上架成功'
              });
              setTimeout(()=>{
                this.getUndercarriage();
              },1000)
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //编辑付费卡
      redact(row){
        console.log(row)
        this.card.id = row.id
        this.card.name = row.name
        this.card.price = row.sale
        this.card.time = row.userTime
        this.card.type = row.type
        this.card.number = row.times
        this.card.virtualPrice = row.virtualPrice
        this.card.choose = row.open
        this.card.overTime =new Date(row.overTime)
        // console.log(new Date(row.overTime))
        this.card.remark = row.villageId
      },
      //提交编辑后的付费卡
      onSubmit3(){
        console.log("提交对话框3",this.card)
        this.$axios.post(this.baseURL+'card/edit',{
          "id": this.card.id,//id
          "name": this.card.name,//名称
          "sale": this.card.price,//售价
          "times": this.card.number,//次数
          "userTime": this.card.time,//有效期
          "type": this.card.type,//类型
          'open':this.card.choose,//卡开关
          'virtualPrice':this.card.virtualPrice,//卡虚拟价
          "requestSource":"PC",
          "overTime":this.card.overTime,//卡结束时间
          "villageId":this.card.remark
        }).then((res)=>{
          console.log(res,"提交编辑后的付费卡");
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '编辑成功'
            });
            setTimeout(()=>{
              this.getAllCards();
            },1000)
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .userlist{
    position: relative;
    .status_box{
      width: 230px;
      height: 40px;
      box-sizing: border-box;
      position: absolute;
      right: 10px;
      display: flex;
      align-content: center;
      z-index: 1;
      .timeCard,.clubCard{
        width: 104px;
        height: 30px;
        border: 1px solid #ff5733;
        box-sizing: border-box;
        text-align: center;
        line-height: 30px;
        color: #ff5733;
        >>> .el-button{
          width: 100%;
          color: #ff5733;
          font-size: 14px;
          padding: 0;
          border: none;
          outline: none;
        }
        >>> .el-button:focus, .el-button:hover {
          background-color: #ffffff;
        }
      }
      .clubCard{
        margin-left: 20px;
        color: #ffffff;
        background-color: #ff5733;
        >>> .el-button{
          color: #ffffff;
          background-color: #ff5733;
        }
        >>> .el-button:focus, .el-button:hover {
          background-color: #ff5733;
        }
      }

    }
  }
  .dialog{
    >>> .el-dialog__header{
      border-bottom: 1px solid rgba(215, 213, 213, 1);
    }
    >>> .el-dialog__title{
      font-size: 14px;
    }
    .name,.time{
      width: 276px;
      height: 30px;
    }
    .price{
      width: 245px;
      height: 30px;
    }
    .pricetext{
      margin-left: 10px;
    }
    .timetext{
      font-size: 12px;
      color: #a6a6a6;
      line-height: 25px;
    }
    .sure,.cancel{
      height: 30px;
    }
    .sure:focus, .sure:hover{
      background-color: #409EFF;
      color: #ffffff;
    }
    >>> .el-button{
      width: 50px;
      font-size: 14px;
      text-align: center;
      padding: 0;
    }
  }

</style>
